<template>
  <div class="smart_container_rightBlock smart_browser">
    <TopNav @changeLangEvent='changeLangEvent'/>
    <div class="smart_container_rightBlock_scroll">
      <div class="smart_container_qkMessageBlock">
        <div class="left">
          <!-- 默认展示 -->
          <div class="smart_container_tableList smart_container_pc" v-if="isShowDefalutTable">
            <div class="smart_container_dz_table">
              <Table :columns="columns" :data="tableList">
                <template slot-scope="{ row }" slot="address">
                  <div  style="text-overflow:ellipsis;white-space: nowrap;overflow: hidden;">
                    {{ row.address}}
                  </div>
                </template>
                <!--                <template slot-scope="{ row }" slot="name">-->
                <!--                  <div>-->
                <!--                    {{ row.name }}-->
                <!--                  </div>-->
                <!--                </template>-->
                <template slot-scope="{ row }" slot="balance">
                  <div>
                    {{ row.balance}}
                  </div>
                </template>
                <template slot-scope="{ row }" slot="pledgebalance">
                  <div>
                    {{row.pledgebalance}}
                  </div>
                </template>
                <template slot-scope="{ row }" slot="totalholding">
                  <div>
                    {{row.totalholding}}}
                  </div>
                </template>
                <!--                <template slot="none">-->
                <!--                  {{0}}-->
                <!--                </template>-->
                <!--                <template slot-scope="{ row }" slot="timestamp">-->
                <!--                  {{formatTime(row.timestamp,'YYYY-MM-dd hh:mm:ss')}}-->
                <!--                </template>-->
                <!--                <template slot-scope="{ row }" slot="Address">-->
                <!--                  <div style="text-overflow:ellipsis;white-space: nowrap;overflow: hidden;">-->
                <!--                    {{ row.Address }}-->
                <!--                  </div>-->
                <!--                </template>-->
              </Table>
            </div>
          </div>
          <!-- 默认展示 手机-->
          <div class="smart_container_tableList_phone" v-if="isShowDefalutTable">
            <div class="smart_main">
              <div class="main_flex" v-for="item in tableList" :key="item.ranking">
                <div class="flex">
                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_ranking','排名')}}</span>
                  <span class="cont">{{ item.ranking }}</span>
                </div>
                <div class="flex" style="cursor: pointer" >
                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_address','地址')}}</span>
                  <span class="gray cont" >{{item.address}} </span>
                </div>

                <!--                <div class="flex">-->
                <!--                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">币种</span>-->
                <!--                  <span class="cont">{{item.name}}</span>-->
                <!--                </div>-->

                <div class="flex">
                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_QuantityHeld','持有数量')}}</span>
                  <span class="gray cont">{{item.balance}}</span>
                </div>
                <div class="flex">
                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_Pledge','质押')}}</span>
                  <span class="gray cont">{{item.pledgebalance}}</span>
                </div>
                <div class="flex">
                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_TotalAmount','总数')}}</span>
                  <span class="gray cont">{{item.totalholding}}</span>
                </div>

                <!--                <div class="flex">-->
                <!--                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_time','时间')}}</span>-->
                <!--                  <span class="cont ">{{ formatTime(item.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>-->
                <!--                </div>-->
                <!--                <div class="flex" style="cursor: pointer" @click="searchOnMain(item.Address)">-->
                <!--                  <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_broadcasts','播报方')}}</span>-->
                <!--                  <span class="cont gray" >{{ item.Address && item.Address.substring(0,20) + '...' }}</span>-->
                <!--                </div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="max_width pages 1" v-if="isShowDefalutTable">
        <!-- show-elevator -->
        <Page :total="totalPage" :current="nowIndex" @on-change="handleChange"
              :prev-text="$setI18n('lang_br_prev','上一页')" :next-text="$setI18n('lang_br_next','下一页')"/>
      </div>

      <div class="max_width pages 2" v-if="!pageShow && accountTransactionsList && isShowDzTable">
        <Page :total="1000000" @on-change="handleChangeAcount" :prev-text="$setI18n('lang_br_prev','上一页')"
              :next-text="$setI18n('lang_br_next','下一页')"/>
      </div>

      <div class="max_width pages 3" v-if="pageShow && accountList.length >= 11 && isShowDzTable">
        <Page :total="1000000" @on-change="handleChangeMoneyAcount" :prev-text="$setI18n('lang_br_prev','上一页')"
              :next-text="$setI18n('lang_br_next','下一页')"/>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
import TopNav from './topNav/topNav.vue';
import {mapGetters, mapActions} from 'vuex';
import Utils from '@/utils/index';
import axios from 'axios';

@Component({
  components: {
    TopNav
  },
  methods: {
    ...mapActions([
      'getOutputRanking'
    ])
  }
})
export default class Generalization extends Vue {
  /** 最近出块 */
  private tableList: Array<object> = [];
  /** 查询地址 */
  private accountTransactionsList: any = null;
  /** 代币交易 */
  private accountList: Array<object> = [];
  /** 是否显示默认列表 */
  private isShowDefalutTable: boolean = false;
  /** 是否显示代币交易分页 */
  private pageShow: boolean = false;
  /** 是否显示地址列表 */
  private isShowDzTable: boolean = false;
  /** 列表数据 */
  private totalPage: any = null;
  private columns: Array<object> = [];
  /** 改变 */
  private isStart: boolean = false;
  private nowIndex: number = 0;
  private lang = 'ZH';



  /** 初始化函数 */
  private mounted(): void {
    let _lang = Utils['getUrlParam']('lang');
    this.lang = _lang ||'en';
    this.$i18n['locale'] = 'en-US';
    let _index = Utils['getUrlParam']('index');
    this.nowIndex = parseInt(_index) || 1;
    console.log('this.nowIndex = ' + this.nowIndex);
    this.changeLangEvent();

    (async () => {
      //let _res = await this['getOutputRanking']("1");
      let Response = await axios.get("https://explore.smartx.one/rank/?cmd=getrankingdata&browserIndex=1");
      let _res = Response.data;
      this.isStart = true;
      if (_res) {
        console.log('初始化_res=');
        console.log(_res);
        this.tableList = _res;
        this.totalPage = 100;
        console.log(this.totalPage);
        this.isShowDefalutTable = true;
      }
    })();
  }
  private changeLangEvent(): void {
    this.lang = this.$i18n['locale'] === 'zh-CN' ? 'ZH' : 'EN';
    this.columns = [
      {
        title: this['$setI18n']('lang_br_ranking','排名'),
        width: 110,
        key: 'ranking',
      },
      {
        title: this['$setI18n']('lang_br_address','地址'),
        key: 'address',
        //slot: 'address',
      },
      // {
      //   title: "币种",
      //   width: 100,
      //   key: 'name'
      //   //slot: 'name'
      // },
      {
        title: this['$setI18n']('lang_br_QuantityHeld','持有数量'),
        width: 210,
        key: 'balance'
        //slot: 'balance'
      },
      {
        title: this['$setI18n']('lang_br_Pledge','质押'),
        width: 210,
        key: 'pledgebalance'
      },
      {
        title: this['$setI18n']('lang_br_TotalAmount','总数'),
        width: 210,
        key: 'totalholding'
      }
      // {
      //   title: this['$setI18n']('lang_br_broadcasts', '播报方'),
      //   key: 'Address',
      //   tooltip: true,
      //   slot: 'Address',
      // }
    ];
  }
  private formatTime(_time, _format) {
    var d = new Date();
    return Utils['formatTime'](new Date(parseInt(_time)), _format);
  }

  //分页
  private handleChange(index) {
    console.log(index);
    (async () => {
      //let _res = await this['getOutputRanking'](index);
      let Response = await axios.get("https://explore.smartx.one/rank/?cmd=getrankingdata&browserIndex="+index);
      let _res = Response.data;
      console.log('index=' + index);
      this.tableList = _res;
    })();
  }
}

</script>
<style lang="scss">
@import 'generalization';
</style>
